import {createElement, Component, findDOMNode} from 'rax';
import View from 'rax-view';
import Picture from 'rax-picture';
import Touchable from 'rax-touchable';
import Slider from 'rax-slider';
import Text from 'rax-text';
import Video from 'rax-video';
import Player from 'rax-player';
import { isWeex } from 'universal-env';
import transition from 'universal-transition';

const defaultModuleData = {
  // 整站轮播小圆点设置
  tagWidth: 10,
  tagSelectWidth: 20,
  tagBottom: 20,
  tagBg: '#000000',
  tagSelectBg: '#000000',
  tagMargin: 10,

  // 统一图片回到首页
  bottomPic: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2Qw5zo4PI8KJjSspoXXX6MFXa-3355153118.jpg',
  toTopPic: 'https://img.alicdn.com/imgextra/i4/3355153118/TB2ae6IdrSYBuNjSspiXXXNzpXa-3355153118.jpg',
  bottomPicHeight: 56,
  logo: 'https://img.alicdn.com/imgextra/i4/3355153118/TB2JwlEo_nI8KJjSszgXXc8ApXa-3355153118.png',

  // tab1 澳洲风尚
  tab1SliderWidth: 375,
  tab1SliderHeight: 454,
  tab1SliderPictures: [
    {
      picUrl: 'https://img.alicdn.com/imgextra/i2/3355153118/TB20Kxzd1GSBuNjSspbXXciipXa-3355153118.png',
      hotUrl: '//m.taobao.com',
    },
    {
      picUrl: 'https://img.alicdn.com/imgextra/i2/3355153118/TB20Kxzd1GSBuNjSspbXXciipXa-3355153118.png',
      hotUrl: '//m.taobao.com',
    },
    {
      picUrl: 'https://img.alicdn.com/imgextra/i2/3355153118/TB20Kxzd1GSBuNjSspbXXciipXa-3355153118.png',
      hotUrl: '//m.taobao.com',
    },
  ],
  tab1Title: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2oH8weQfb_uJkHFJHXXb4vFXa-3355153118.png',
  tab1Goods: [
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1oUzYdrSYBuNjSspfXXcZCpXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      pic: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2D_tNaYSYBuNjSspiXXXNzpXa-3355153118.jpg',
      title: '婴幼儿童DHA',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i2/0/TB1xPFebmYTBKNjSZKbXXXJ8pXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      pic: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2D_tNaYSYBuNjSspiXXXNzpXa-3355153118.jpg',
      title: '婴幼儿童DHA婴幼儿童DHA',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      pic: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2D_tNaYSYBuNjSspiXXXNzpXa-3355153118.jpg',
      title: '婴幼儿童DHA',
    },
  ],
  tab1BannerHeight: 416,
  tab1Banner: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2rp5JXHwrBKNjSZPcXXXpapXa-3355153118.jpg',
  tab1BannerUrl: '//m.taobao.com',
  tab1SinglePost: [
    {
      pic: 'https://img.alicdn.com/imgextra/i1/3355153118/TB25fK_a9tYBeNjSspaXXaOOFXa-3355153118.jpg',
      title: '如果我是高级脸',
      content: '撞香不可怕，谁土谁尴尬',
      keyWords: '气质,是的方式的#',
      hotUrl: '//m.taobao.com',
    },
    {
      pic: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2wPyVXOMnBKNjSZFoXXbOSFXa-3355153118.jpg',
      title: '如果我是小野猫',
      content: '请自觉顺毛，投食',
      keyWords: '诱惑',
      hotUrl: '//m.taobao.com',
    },
    {
      pic: 'https://img.alicdn.com/imgextra/i1/3355153118/TB25fK_a9tYBeNjSspaXXaOOFXa-3355153118.jpg',
      title: '女神斩男记',
      content: 'get女神同款斩男香',
      keyWords: '斩男',
      hotUrl: '//m.taobao.com',
    },
    {
      pic: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2wPyVXOMnBKNjSZFoXXbOSFXa-3355153118.jpg',
      title: '女王寻爱记',
      content: '就是独立特行',
      keyWords: '独特',
      hotUrl: '//m.taobao.com',
    },
  ],

  // tab2 好货体验站
  tab2VideoHeight: 422,
  tab2VideoPoster: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2Icfsa1OSBuNjy0FdXXbDnVXa-3355153118.png',
  tab2Video: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
  tab2SliderWidth: 375,
  tab2SliderHeight: 445,
  tab2SliderPictures: [
    {
      picUrl: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2CQ._dQKWBuNjy1zjXXcOypXa-3355153118.png',
      hotUrl: '//m.taobao.com',
    },
    {
      picUrl: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2CQ._dQKWBuNjy1zjXXcOypXa-3355153118.png',
      hotUrl: '//m.taobao.com',
    },
    {
      picUrl: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2CQ._dQKWBuNjy1zjXXcOypXa-3355153118.png',
      hotUrl: '//m.taobao.com',
    },
  ],
  tab2VideoListWidth: 727,
  tab2VideoListHeight: 409,
  tab2VideoList: [
    {
      video: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      videoPoster: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2Icfsa1OSBuNjy0FdXXbDnVXa-3355153118.png',
      title: '新年买什么',
    },
    {
      video: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      videoPoster: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2Icfsa1OSBuNjy0FdXXbDnVXa-3355153118.png',
      title: '比相亲对象丑更尴尬的是',
    },
    {
      video: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      videoPoster: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2Icfsa1OSBuNjy0FdXXbDnVXa-3355153118.png',
      title: '一个正经的代盐视频',
    },
    {
      video: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      videoPoster: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2Icfsa1OSBuNjy0FdXXbDnVXa-3355153118.png',
      title: '还在直播逛店？',
    },
  ],



  // tab3 精彩视频秀
  tab3BannerHeight: 563,
  tab3Banner: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2egxua79WBuNjSspeXXaz5VXa-3355153118.jpg',
  tab3BannerUrl: '//m.taobao.com',
  tab3VideoListWidth: 727,
  tab3VideoListHeight: 409,
  tab3VideoList: [
    {
      video: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      videoPoster: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2Icfsa1OSBuNjy0FdXXbDnVXa-3355153118.png',
      title: '小仙女的爱用物',
      showAll: '//m.taobao.com',
    },
    {
      video: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      videoPoster: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2Icfsa1OSBuNjy0FdXXbDnVXa-3355153118.png',
      title: '可以逗不能痘',
      showAll: '//m.taobao.com',
    },
    {
      video: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      videoPoster: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2Icfsa1OSBuNjy0FdXXbDnVXa-3355153118.png',
      title: '新做的指甲又被我咬坏了',
      showAll: '//m.taobao.com',
    },
    {
      video: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      videoPoster: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2Icfsa1OSBuNjy0FdXXbDnVXa-3355153118.png',
      title: '拥有美足的正确方式',
      showAll: '//m.taobao.com',
    },
  ],

};




const styles = {
  wrapper: {
    width: 750,
    textAlign: 'center',
  },
};
export default class MainApp extends Component {
  constructor(props) {
    super(props);
    this.pageUtils = props.pageUtils;
    this.state = {
      mds: props.mds || {},
      gdc: props.gdc || {},
      tabsHeightArr: [1334, 1334, 1334],
      // selectedTab: 0,
      test: '初始状态',
    };

    this.sliderTab = this.sliderTab.bind(this);
  }

  getItemsData(cb = () => {}) {

    const getGoodsIds = (ids) => {
      let resIds = ids;
      if (typeof ids === 'object') {
        const idArr = ids.map(id => id.goods);
        resIds = idArr.join(',');
      }
      // if (resIds.length) return null;
      return resIds;
    };

    const { mds, gdc } = this.state;
    let { moduleData: {
      tab1Goods = ''
    } } = mds;

    const goods = getGoodsIds(tab1Goods);
    const ownerId = 2658963920;

    const data = {
      ownerId,
      isAuto: !goods.length,
      catId: 0,
      itemIds: goods,
      keyWord: '',
      startPrice: '',
      endPrice: '',
      pageSize: 10,
    };
    const params = {
      api: 'mtop.data.item.get',
      v: '1.0',
      data,
      ecode: 0,   // 必须
      type: 'GET',
    };
    this.pageUtils.Mtop.request(params, resp => {
      // console.log('Mtop resp ==== ', resp);
      const msg = (resp && resp.ret ? resp.ret[0] : '').split('::');
      if (msg[0] === 'SUCCESS') {
        const { list } = resp.data;
        console.log('allGoods===', list);
        this.setState({
          allGoods: list,
        });
      }
    }, err => {
      // console.warn('Mtop err ==== ', err);
      // this.setState({
      //   tab1Goods: defaultGoods,
      // });
    });
  }

  goTargetUrl = (url, nid) => {
    let { mds, gdc } = this.state;
    let params = {
      url: url,
      nid: nid || 0,
      widgetId: mds.widgetId,
      moduleName: mds.moduleName
    };

    this.pageUtils && this.pageUtils.goTargetUrl(params);
  };

  checkData(data, defaultKey, type, firstChildAttr) {
    let newData;
    switch (type) {
      case 'num': {
        newData = parseInt(data) ? parseInt(data) : defaultModuleData[defaultKey];
        break;
      }
      case 'string': {
        newData = data.length > 0 ? data : defaultModuleData[defaultKey];
        break;
      }
      case 'array': {
        newData = data.length && data[0][firstChildAttr].length ? data : defaultModuleData[defaultKey];
        break;
      }
      case 'goods': {
        if (typeof data === 'string') {
          newData = data.length > 0 ? data : defaultModuleData[defaultKey];
        } else {
          newData = data.length && data[0].goods.length ? data : defaultModuleData[defaultKey];
        }
        break;
      }
      case 'jsonStr': {
        try {
          newData = JSON.parse(data);
        } catch (e) {
          newData = defaultModuleData[defaultKey];
        }
        break;
      }
      default: {
        newData = data;
      }
    }
    return newData;
  }

  // 添加监听器，接收消息
  componentWillMount() {

    if (this.pageUtils && this.pageUtils.pageEmitter) {
      const emitter = this.pageUtils.pageEmitter;
      // console.log('body emitter', emitter);
      emitter.on('clickTab', this.sliderTab);
    }
  }

  // 组件销毁时移除监听器
  componentWillUnmount() {
    if (this.pageUtils && this.pageUtils.pageEmitter) {
      const emitter = this.pageUtils.pageEmitter;
      emitter.off('clickTab', this.sliderTab);
    }
  }

  sliderTab(params) {
    if (this.pageUtils && this.pageUtils.lift) {
      const { widgetId } = this.state.mds;
      this.pageUtils.lift.scrollTo(widgetId);
    }
    this.refs.tabBox.sliderTo(parseInt(params));
  }

  setHeight() {
    // const tabRefs = [ 'tabOne', 'tabTwo', 'tabThree' ];
    // // const delay = navigator.platform === 'iOS' ? 40 : 200;
    //
    // this.setState({
    //   test: '11111',
    // });
    // if (isWeex) {
    //   this.setState({
    //     test: '22222'
    //   });
    //   let domModule = require('@weex-module/dom');
    //   const promises = tabRefs.map(item => {
    //     return new Promise((resolve, reject) => {
    //       this.setState({
    //         test: '44444'
    //       });
    //       domModule.getComponentRect(findDOMNode(this.refs[item]), (option) => {
    //         resolve(option.size.height);
    //         this.setState({
    //           test: JSON.stringify(option)
    //         });
    //         this.setState({
    //           test: option.size.height
    //         });
    //       });
    //     });
    //   });
    //   this.setState({
    //     test: '333333'
    //   });
    //   Promise.all(promises).then(values => {
    //     this.setState({
    //       test: JSON.stringify(values)
    //     });
    //
    //     if (values[0] && values[1] && values[2]) {
    //       if (this.setHeightTimeout) clearTimeout(this.setHeightTimeout);
    //       this.setState({
    //         tabsHeightArr: values,
    //       });
    //     } else {
    //       if (this.setHeightTimeout) clearTimeout(this.setHeightTimeout);
    //       this.setHeightTimeout = setTimeout(() => {
    //         this.setHeight();
    //       }, 10);
    //     }
    //
    //     this.setState({
    //       tabsHeightArr: values,
    //     });
    //   });
    // } else {
    //   const tabsHeight = tabRefs.map(item => findDOMNode(this.refs[item]).clientHeight * 2);
    //
    //   this.setState({
    //     test: 'web:' + JSON.stringify(tabsHeight)
    //   });
    //
    //   // if (tabsHeight[0] && tabsHeight[1] && tabsHeight[2]) {
    //   //   if (this.setHeightTimeout) clearTimeout(this.setHeightTimeout);
    //   //   this.setState({
    //   //     tabsHeightArr: tabsHeight,
    //   //   });
    //   // } else {
    //   //   if (this.setHeightTimeout) clearTimeout(this.setHeightTimeout);
    //   //   this.setHeightTimeout = setTimeout(() => {
    //   //     this.setHeight();
    //   //   }, 10);
    //   // }
    //
    // }

  }

  componentDidMount() {
    this.getItemsData();

    // this.setHeight();

    const tabRefs = [ 'tabOne', 'tabTwo', 'tabThree' ];
    const delay = navigator.platform === 'iOS' ? 40 : 200;

    this.setState({
      test: delay
    });
    setTimeout(() => {
      if (isWeex) {
        this.setState({
          test: '22222'
        });
        let domModule = require('@weex-module/dom');
        const promises = tabRefs.map(item => {
          return new Promise((resolve, reject) => {
            domModule.getComponentRect(findDOMNode(this.refs[item]), (option) => {
              resolve(option.size.height);
              this.setState({
                test: option.size.height
              });
            });
          });
        });
        this.setState({
          test: '333333'
        });
        Promise.all(promises).then(values => {
          this.setState({
            test: JSON.stringify(values)
          });

          this.setState({
            tabsHeightArr: values,
          });
        });
      } else {
        const tabsHeight = tabRefs.map(item => findDOMNode(this.refs[item]).clientHeight * 2);
        this.setState({
          tabsHeightArr: tabsHeight,
        });
      }
    }, delay);

  }

  render() {
    let {
      moduleData: {
        tagWidth = '',
        tagSelectWidth = '',
        tagBottom = '',
        tagBg = '',
        tagSelectBg = '',
        tagMargin = '',

        // 统一的返回顶部按钮设置
        bottomPic = '',
        toTopPic = '',
        bottomPicHeight = '',
        logo = '',

        // tab1
        tab1SliderWidth = '',
        tab1SliderHeight = '',
        tab1SliderPictures = [],
        tab1Goods = [],
        tab1Title = '',
        tab1BannerHeight = '',
        tab1Banner = '',
        tab1BannerUrl = '',
        tab1SinglePost = [],

        // tab2
        tab2VideoHeight = '',
        tab2VideoPoster = '',
        tab2Video = '',
        tab2SliderWidth = '',
        tab2SliderHeight = '',
        tab2SliderPictures = [],
        tab2VideoListWidth = '',
        tab2VideoListHeight = '',
        tab2VideoList = [],


        // tab3
        tab3BannerHeight = '',
        tab3Banner = '',
        tab3BannerUrl = '',
        tab3VideoListWidth = '',
        tab3VideoListHeight = '',
        tab3VideoList = [],


      },
    } = this.state.mds;
    const {
      mds,
      allGoods,
      tabsHeightArr,
    } = this.state;


    // 校正数据
    // tag
    const { checkData = () => {} } = this;
    tagWidth = checkData(tagWidth, 'tagWidth', 'num');
    tagSelectWidth = checkData(tagSelectWidth, 'tagSelectWidth', 'num');
    tagBottom = checkData(tagBottom, 'tagBottom', 'num');
    tagMargin = checkData(tagMargin, 'tagMargin', 'num');
    tagBg = checkData(tagBg, 'tagBg', 'string');
    tagSelectBg = checkData(tagSelectBg, 'tagSelectBg', 'string');
    const tagStyle = {
      tagWidth,
      tagSelectWidth,
      tagBottom,
      tagMargin,
      tagBg,
      tagSelectBg,
    };

    bottomPic = checkData(bottomPic, 'bottomPic', 'string');
    toTopPic = checkData(toTopPic, 'toTopPic', 'string');
    bottomPicHeight = checkData(bottomPicHeight, 'bottomPicHeight', 'num');
    logo = checkData(logo, 'logo', 'string');
    const toHomeStyle = {
      bottomPic,
      logo,
      bottomPicHeight,
      goToHome: () => {
        if (this.pageUtils && this.pageUtils.goTop) {
          this.pageUtils.goTop();
        }
        this.sliderTab(0);
        if (this.pageUtils && this.pageUtils.pageEmitter) {
          const emitter = this.pageUtils.pageEmitter;
          emitter.emit('goToIndex', '');
        }
      }
    };

    // tab1

    tab1SliderWidth = checkData(tab1SliderWidth, 'tab1SliderWidth', 'num');
    tab1SliderHeight = checkData(tab1SliderHeight, 'tab1SliderHeight', 'num');
    tab1SliderPictures = checkData(tab1SliderPictures, 'tab1SliderPictures', 'array', 'picUrl');
    tab1Goods = checkData(tab1Goods, 'tab1Goods', 'array', 'imgUrl');
    tab1Title = checkData(tab1Title, 'tab1Title', 'string');
    tab1Banner = checkData(tab1Banner, 'tab1Banner', 'string');
    tab1BannerUrl = checkData(tab1BannerUrl, 'tab1BannerUrl', 'string');
    tab1BannerHeight = checkData(tab1BannerHeight, 'tab1BannerHeight', 'num');
    tab1SinglePost = checkData(tab1SinglePost, 'tab1SinglePost', 'array', 'pic');

    // tab2
    tab2Video = checkData(tab2Video, 'tab2Video', 'string');
    tab2VideoPoster = checkData(tab2VideoPoster, 'tab2VideoPoster', 'string');
    tab2VideoHeight = checkData(tab2VideoHeight, 'tab2VideoHeight', 'num');
    tab2SliderWidth = checkData(tab2SliderWidth, 'tab2SliderWidth', 'num');
    tab2SliderHeight = checkData(tab2SliderHeight, 'tab2SliderHeight', 'num');
    tab2SliderPictures = checkData(tab2SliderPictures, 'tab2SliderPictures', 'array', 'picUrl');
    tab2VideoListWidth = checkData(tab2VideoListWidth, 'tab2VideoListWidth', 'num');
    tab2VideoListHeight = checkData(tab2VideoListHeight, 'tab2VideoListHeight', 'num');
    tab2VideoList = checkData(tab2VideoList, 'tab2VideoList', 'array', 'video');


    // tab3
    tab3Banner = checkData(tab3Banner, 'tab3Banner', 'string');
    tab3BannerUrl = checkData(tab3BannerUrl, 'tab3BannerUrl', 'string');
    tab3BannerHeight = checkData(tab3BannerHeight, 'tab3BannerHeight', 'num');
    tab3VideoListWidth = checkData(tab3VideoListWidth, 'tab3VideoListWidth', 'num');
    tab3VideoListHeight = checkData(tab3VideoListHeight, 'tab3VideoListHeight', 'num');
    tab3VideoList = checkData(tab3VideoList, 'tab3VideoList', 'array', 'video');




    // props
    const tabBodyProps = {
      mds,
      style: styles.wrapper,
      heightList: tabsHeightArr,
      ref: 'tabBox'
    };
    const tab1Props = {
      mds,

      tagStyle,
      toHomeStyle,
      toTopPic,

      tab1SliderWidth,
      tab1SliderHeight,
      tab1SliderPictures,
      tab1Title,
      tab1Goods,
      tab1BannerHeight,
      tab1Banner,
      tab1BannerUrl,
      tab1SinglePost,

      clickHot: (url, nid) => {
        this.goTargetUrl(url, nid);
      },
      ref: 'tabOne',
    };
    const tab2Props = {
      mds,
      tagStyle,
      toHomeStyle,

      tab2Video,
      tab2VideoPoster,
      tab2VideoHeight,
      tab2SliderWidth,
      tab2SliderHeight,
      tab2SliderPictures,
      tab2VideoListWidth,
      tab2VideoListHeight,
      tab2VideoList,


      clickHot: (url, nid) => {
        this.goTargetUrl(url, nid);
      },
      ref: 'tabTwo',
    };
    const tab3Props = {
      mds,
      toHomeStyle,

      tab3BannerHeight,
      tab3Banner,
      tab3BannerUrl,
      tab3VideoListWidth,
      tab3VideoListHeight,
      tab3VideoList,


      clickHot: (url, nid) => {
        this.goTargetUrl(url, nid);
      },
      ref: 'tabThree',
    };

    // 埋点
    const viewProps = {
      style: {
        backgroundColor: '#ffffff',
      },
      'data-role': mds.moduleName,
      'data-spmc': `${mds.moduleName}_${mds.widgetId}`,
    };
    console.log('this.state.test', this.state.test);

    return (
      <View {...viewProps}>
        {/*<View>*/}
          {/*{this.state.test}*/}
        {/*</View>*/}
        <TabBody {...tabBodyProps}>
          <TabOne {...tab1Props}/>
          <TabTwo {...tab2Props}/>
          <TabThree {...tab3Props}/>
          {/*<View>123</View>*/}
        </TabBody>
      </View>
    );
  }
}

class TabOne extends Component {
  render() {

    const {
      mds,
      tagStyle,
      toHomeStyle,
      toTopPic,

      tab1SliderWidth,
      tab1SliderHeight,
      tab1SliderPictures,
      tab1Title,
      tab1Goods,
      tab1BannerHeight,
      tab1Banner,
      tab1BannerUrl,
      tab1SinglePost,
      clickHot,
    } = this.props;

    const props = {
      mds,
      clickHot,
      tab: 'tabOne',
    };

    const carouselProps = {
      width: tab1SliderWidth,
      height: tab1SliderHeight,
      tagStyle,
      pages: tab1SliderPictures,
      ...props,
    };
    const bannerProps = {
      pic: tab1Banner,
      link: tab1BannerUrl,
      height: tab1BannerHeight,
      ...props,
    };
    const singlePostProps = {
      data: tab1SinglePost,
      ...props,
    };
    const picWrapperProps = {
      style: {
        flexDirection: 'row',
        justifyContent: 'center',
        width: 750,
        height: 60,
        marginTop: 10,
      },
    };
    const picProps = {
      source: { uri: tab1Title },
      lazyload: true,
      style: {
        width: 170,
        height: 40,
      },
    };

    return (
      <View>
        <Slider3dBox {...carouselProps}/>
        <View {...picWrapperProps}>
          <Picture {...picProps}/>
        </View>
        <GoodsList goodsList={tab1Goods} clickHot={clickHot}/>
        <Banner {...bannerProps}/>
        <SinglePost {...singlePostProps}/>
        <ToHome {...toHomeStyle} toTopPic={toTopPic}/>
      </View>
    );
  }
}

class TabTwo extends Component {
  render() {
    const {
      mds,
      tagStyle,
      toHomeStyle,

      tab2Video,
      tab2VideoPoster,
      tab2VideoHeight,
      tab2SliderWidth,
      tab2SliderHeight,
      tab2SliderPictures,
      tab2VideoListWidth,
      tab2VideoListHeight,
      tab2VideoList,


      clickHot,
    } = this.props;

    const props = {
      mds,
      clickHot,
      tab: 'tabTwo',
    };

    const oneVideoProps = {
      style: {
        height: tab2VideoHeight,
        width: 750,
      },
      url: tab2Video,
      poster: tab2VideoPoster,
      ...props,
    };
    const carouselProps = {
      width: tab2SliderWidth,
      height: tab2SliderHeight,
      tagStyle,
      pages: tab2SliderPictures,
      ...props,
    };
    const videoListProps = {
      videoHeight: tab2VideoListHeight,
      videoWidth: tab2VideoListWidth,
      videoList: tab2VideoList,
      ...props,
    };


    return (
      <View>
        <SinglePlayer {...oneVideoProps}/>
        <Slider3dBox {...carouselProps}/>
        <VideoList1 {...videoListProps}/>
        <ToHome {...toHomeStyle}/>
      </View>
    );
  }
}

class TabThree extends Component {
  render() {
    const {
      mds,
      toHomeStyle,

      tab3BannerHeight,
      tab3Banner,
      tab3BannerUrl,
      tab3VideoListWidth,
      tab3VideoListHeight,
      tab3VideoList,


      clickHot,
    } = this.props;

    const props = {
      mds,
      clickHot,
      tab: 'tabThree',
    };

    const bannerProps = {
      ...props,
      pic: tab3Banner,
      link: tab3BannerUrl,
      height: tab3BannerHeight,
    };

    const videoListProps = {
      ...props,
      videoHeight: tab3VideoListHeight,
      videoWidth: tab3VideoListWidth,
      videoList: tab3VideoList,
    };


    return (
      <View>
        <Banner {...bannerProps}/>
        <VideoList2 {...videoListProps}/>
        <ToHome {...toHomeStyle}/>
      </View>
    );
  }
}

// =======================
class TabBody extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: props.defaultPage || 0
    };
  }

  moveBox(duration, offset = 0) {

    const { page } = this.state;
    const box = findDOMNode(this.refs.box); // 获取元素
    const moveX = 750 * page + offset;
    setTimeout(() => {
      transition(box, {
        transform: `translate(-${isWeex ? moveX : moveX / 2}px, 0)`
      }, {
        timingFunction: 'ease',
        duration: duration
      }, () => {
        // console.log('moveEnd');
      });
    }, 0);
  }

  sliderTo(page) {
    this.setState({
      page: page
    });
  }

  componentDidMount() {
    this.moveBox(0);
  }

  componentDidUpdate() {
    this.moveBox(500);
  }

  render() {
    const { heightList = [], children = [] } = this.props;
    const { page } = this.state;
    const boxProps = {
      style: {
        width: heightList.length * 750,
        height: heightList[page],
        flexDirection: 'row'
      },
      ref: 'box',
    };

    return (
      <View {...boxProps}>
        {
          children.map((item, index) => {
            return (
              <View style={{width: 750, height: heightList[index]}}>
                {item}
              </View>
            );
          })
        }
      </View>
    );
  }
}

// 轮播
const carouselStyles = {
  wrapper: {
    position: 'relative',
  },
  tagBox: {
    position: 'absolute',
    left: 0,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row'
  }
};
class Carousel extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selected: 0
    };
  }

  onSliderChange(index) {
    this.setState({
      selected: index.index
    });
  }

  onTagClick(index) {
    this.refs.Slider.slideTo(index);
    this.setState({
      selected: index
    });
  }

  render() {
    const {
      mds,
      clickHot,
      tab,
      pages,
      width,
      height,
      tagStyle,
      autoplayTime = 0,
      loop = true,
      tagShow = true,
      dadStyle = {},
    } = this.props;

    const {
      tagWidth = 10,
      tagSelectWidth = 20,
      tagBottom = 10,
      tagBg = '#ffffff',
      tagSelectBg = '#ffffff',
      tagMargin = 10,
    } = tagStyle;

    const isShowTag = tagShow === true || tagShow === 'true';



    const boxProps = {
      style: {
        ...carouselStyles.wrapper,
        width,
        height,
        ...dadStyle,
      },
    };
    const sliderProps = {
      width: `${width}rem`,
      height: `${height}rem`,
      ref: 'Slider',
      autoPlay: autoplayTime > 0,
      loop,
      autoplayTimeout: autoplayTime ? parseFloat(autoplayTime) : 0,
      showsPagination: false,
      onChange: this.onSliderChange.bind(this)
    };
    const tagBoxProps = {
      style: {
        ...carouselStyles.tagBox,
        height: tagWidth,
        width,
        top: height - tagWidth - tagBottom,
      }
    };

    return (
      <View {...boxProps}>
        <Slider {...sliderProps}>
          {
            pages.map((item, index) => {
              const { hotUrl, picUrl } = item;

              const spmdId = tab + (index + 1);
              const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;

              const touchProps = {
                'data-spmd': spmd,
                style: {
                  width,
                  height,
                },
                onPress: () => {
                  clickHot(hotUrl, spmd);
                },
              };
              const picProps = {
                source: {
                  uri: picUrl,
                },
                style: {
                  width,
                  height,
                },
                lazyload: true,
              };

              return (
                <Touchable {...touchProps}>
                  <Picture {...picProps}/>
                </Touchable>
              );
            })
          }
        </Slider>
        {
          isShowTag &&
          <View {...tagBoxProps}>
            {
              pages.map((item, index) => {

                const props = {
                  key: `tag_${index}`,
                  style: {
                    width: index === this.state.selected ? tagSelectWidth : tagWidth,
                    height: tagWidth,
                    borderRadius: tagWidth / 2,
                    marginRight: tagMargin,
                    backgroundColor: index === this.state.selected ? tagSelectBg : tagBg,
                    // 'data-spmd': spmd,
                  },
                  onPress: this.onTagClick.bind(this, index)
                };
                return <Touchable {...props}/>;
              })
            }
          </View>
        }

      </View>
    );
  }
}


// 3D轮播内核
/**
 *   sliderHeight: 600, // 轮播模块的高度
 *   pageHeight: 300,   // 轮播页的高度
 *   width: 450,        // 轮播页的宽度
 *   padding: 90,       // 轮播页间的间距
 *   isScale: true,     // 是否开启正中轮播页缩放
 *   scale: 1.25,       // 正中轮播页放大比例
 *   autoPlay: true,    // 开启自动播放
 *   delay: 5000        // 自动播放延迟，默认3000ms
 */
const slider3dStyles = {
  sliderBox: {
    width: 750,
    overflow: 'hidden',
  },
  slider: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
  },
};
class Slider3d extends Component {
  constructor(props) {
    super(props);

    // touch属性
    // this.startTouch = {x: 0, y: 0 };

    // slider属性
    this.dataLength = props.children.length;
    this.sliderNum = this.dataLength * 2;
    this.maxIndex = this.sliderNum - 1;
    this.leftIndex = 0;
    this.isSliding = false;
  }

  componentDidMount() {
    const { autoPlay, delay = 3000 } = this.props;
    const listArr = this.getNowList();
    this.changSlider({
      listArr,
      isBegin: true,
    });
    if (autoPlay) {
      this.timer = setInterval(() => {
        this.toNext();
      }, delay);
    }
  }

  componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  onAppear = () => {
    const { autoPlay, delay = 3000 } = this.props;
    const listArr = this.getNowList();
    this.changSlider({
      listArr,
      isBegin: true,
    });
    if (autoPlay) {
      this.timer = setInterval(() => {
        this.toNext();
      }, delay);
    }
  };

  onDisappear = () => {
    if (this.timer) {
      clearInterval(this.timer);
    }
  };

  touchStart(e) {
    const touches = e.changedTouches[0];
    const x = isWeex ? touches.pageX : touches.clientX;
    const y = isWeex ? touches.pageY : touches.clientY;
    this.startTouch = {x, y};
  }

  touchEnd(e) {
    const touches = e.changedTouches[0];
    const x = isWeex ? touches.pageX : touches.clientX;
    const y = isWeex ? touches.pageY : touches.clientY;
    const swipeLengthX = x - this.startTouch.x;
    const swipeLengthY = y - this.startTouch.y;
    const isSwipeX = Math.abs(swipeLengthX) > Math.abs(swipeLengthY);
    if (isSwipeX && !this.isSliding) {

      const toSliding = () => {
        this.isSliding = true;
        if (this.timer) {
          const { delay = 3000 } = this.props;
          clearInterval(this.timer);
          this.timer = setInterval(() => {
            this.toNext();
          }, delay);
        }
      };

      if (swipeLengthX > 10) {
        this.toPrev();
        toSliding();
      }
      if (swipeLengthX < -10) {
        this.toNext();
        toSliding();
      }
    }
    e.stopPropagation && e.stopPropagation();
  }

  getNowList() {
    const { leftIndex, maxIndex } = this;
    let arr = [];
    for (let i = 0; i <= maxIndex; i++) {
      const add = i + leftIndex;
      const index = add > maxIndex ? add - maxIndex - 1 : add;
      arr.push(index);
    }
    return arr;
  }

  toPrev() {
    const nowList = this.getNowList();
    let nextList = [ nowList[nowList.length - 1] ];
    nowList.forEach((item, index) => {
      if (index < nowList.length - 1) nextList.push(item);
    });

    this.changSlider({
      listArr: nextList,
    });
  }

  toNext() {
    const nowList = this.getNowList();
    let nextList = [];
    nowList.forEach((item, index) => {
      if (index > 0) nextList.push(item);
    });
    nextList.push(nowList[0]);

    this.changSlider({
      listArr: nextList,
    });
  }

  changSlider({ listArr, isBegin = false }) {
    const { padding = 20, width = 400, scale = 1.25 } = this.props;
    const itemWidth = padding + width;
    const { dataLength } = this;
    const sliderOffset = dataLength * itemWidth - (750 - width) / 2;

    listArr.forEach((item, index) => {
      const box = findDOMNode(this.refs[`page${item}`]);
      const enlarge = index === dataLength ? scale : 1;
      const x = (item - index) * itemWidth + sliderOffset;
      this.transition({
        box,
        x,
        isBegin,
        scale: enlarge,
        opacity: index === 0 || index === listArr.length - 1 ? 0 : 1,
        cb: () => {
          this.leftIndex = listArr[0];
          this.isSliding = false;
        }
      });
    });
  }

  transition({box, x, scale = 1, opacity = 1, isBegin, cb = () => {}}) {
    const { isScale = true, duration = 500 } = this.props;
    const translateStr = `translate(${isWeex ? -x : -x / 2}px, 0)`;
    const scaleStr = isScale ? `scale(${scale}, ${scale})` : null;

    setTimeout(() => {
      transition(box, {
        transform: `${translateStr} ${scaleStr}`,
        opacity,
      }, {
        timingFunction: 'ease',
        duration: isBegin ? 0 : duration,
      }, () => {
        cb();
      });
    }, 0);
  }

  renderPage(item, index) {
    const { padding = 20, width = 400, sliderHeight = 600, pageHeight = 400 } = this.props;

    const props = {
      key: `sliderPage_${index}`,
      ref: `page${index}`,
      style: {
        width,
        height: pageHeight,
        marginRight: padding,
        top: (sliderHeight - pageHeight) / 2,
      },
    };
    return (
      <View {...props}>
        {item}
      </View>
    );
  }

  render() {
    const { padding = 20, width = 400, sliderHeight = 600, children } = this.props;
    const { sliderNum } = this;

    const touchEvents = navigator.platform === 'iOS' ? {
      onTouchStart: this.touchStart.bind(this),
      onTouchEnd: this.touchEnd.bind(this),
    } : {
      onPanstart: this.touchStart.bind(this),
      onPanend: this.touchEnd.bind(this),
    };

    const sliderBoxProps = {
      style: {
        ...slider3dStyles.sliderBox,
        height: sliderHeight,
      },
      ...touchEvents,
      onAppear: this.onAppear,
      onDisappear: this.onDisappear,
    };
    const sliderProps = {
      style: {
        ...slider3dStyles.slider,
        height: sliderHeight,
        width: (padding + width) * sliderNum,
      },
      ref: 'sliderBox',
    };

    return (
      <View {...sliderBoxProps}>
        <View {...sliderProps}>
          {
            children.concat(children).map((item, index) => this.renderPage(item, index))
          }
        </View>
      </View>
    );
  }
}

const slider3dBoxStyles = {
  wrapper: {
    // width: 750,
    // height: 644,
    // textAlign: 'center',
    // overflow: 'hidden',
  },
  sliderPage: {
    position: 'absolute',
    // width: 450,
    // height: 300,
    top: 0,
  }
};
class Slider3dBox extends Component {
  constructor(props) {
    super(props);
    this.pageUtils = props.pageUtils;
    this.state = {
      mds: props.mds || {},
      gdc: props.gdc || {},
      touch: 'null',
    };
  }

  render() {

    const {
      mds,
      clickHot,
      tab,
      pages,
      width,
      height,

    } = this.props;


    if (pages.length === 1) {
      pages.concat(pages).concat(pages);
    }
    if (pages.length === 2) {
      pages.concat(pages);
    }

    const slider3DWrapperProps = {
      style: {
        width: 750,
        height: height + 150,
        textAlign: 'center',
      }
    };

    const slider3DProps = {
      sliderHeight: height + 150,
      pageHeight: height,
      width: width,
      padding: 100,
      isScale: true,
      scale: 1.25,
      autoPlay: true,
      delay: 5000,
    };

    return (
      <View {...slider3DWrapperProps}>
        <Slider3d {...slider3DProps}>
          {
            pages.map((item, index) => {
              const { hotUrl, picUrl } = item;

              const spmdId = tab + (index + 1);
              const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;

              const touchProps = {
                'data-spmd': spmd,
                style: {
                  ...slider3dBoxStyles.sliderPage,
                  width,
                  height,
                },
                onPress: () => {
                  clickHot(hotUrl, spmd);
                },
              };
              const picProps = {
                source: {
                  uri: picUrl,
                },
                style: {
                  ...slider3dBoxStyles.sliderPage,
                  width,
                  height,
                },
                lazyload: true,
              };

              return (
                <Touchable {...touchProps}>
                  <Picture {...picProps}/>
                </Touchable>
              );
            })
          }
        </Slider3d>
      </View>
    );
  }
}


class Banner extends Component {
  render() {
    const {mds, tab, clickHot, pic, link, height} = this.props;
    const size = {
      height,
      width: 750,
      marginTop: 16,
    };

    const spmdId = `${tab}_banner`;
    const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;

    const hotProps = {
      style: size,
      'data-spmd': spmd,
      onPress: () => {
        clickHot(link, spmdId);
      }
    };
    const picProps = {
      style: size,
      source: {
        uri: pic,
      },
      lazyload: true,
    };

    return (
      <Touchable {...hotProps}>
        <Picture {...picProps} />
      </Touchable>
    );
  }
}

const goodsStyle = {
  box: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ffffff'
  },
  item: {
    width: 225,
  },
  pic1: {
    width: 180,
    height: 180,
    marginLeft: 22,
  },
  text: {
    width: 225,
    fontSize: 24,
    height: 24,
    lineHeight: 24,
    textAlign: 'center',
    marginTop: 10,
    overflow: 'hidden',
  },
  pic2: {
    width: 160,
    height: 30,
    marginLeft: 26,
    marginTop: 10,
  },
};
class GoodsList extends Component {

  renderItem(goods) {
    const { clickHot = () => {} } = this.props;

    const { h5Url, imgUrl, pic, title } = goods;
    // console.log('goods===', goods);

    const TouchProps = {
      style: goodsStyle.item,
      onPress: () => {
        clickHot(h5Url);
      },
    };
    const pic1Props = {
      source: {
        uri: imgUrl,
      },
      style: goodsStyle.pic1,
      lazyload: true,
    };
    const pic2Props = {
      source: {
        uri: pic,
      },
      style: goodsStyle.pic2,
      lazyload: true,
    };
    return (
      <Touchable {...TouchProps}>
        <Picture {...pic1Props}/>
        <Text style={goodsStyle.text}>
          { title }
        </Text>
        <Picture {...pic2Props}/>
      </Touchable>
    );
  }

  render() {
    let { goodsList = [], dadStyle = {}, } = this.props;


    return (
      <View style={{
        ...goodsStyle.box,
        ...dadStyle,
      }}>
        {
          goodsList.map((item) => this.renderItem(item))
        }
      </View>
    );
  }
}

class OneVideo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isPlaying: false,
    };
  }

  render() {
    const { isPlaying, } = this.state;
    const { height, width, url, poster = '', dadStyle = {}, title } = this.props;
    const size = {
      width,
      height,
    };


    const wrapperProps = {
      style: {
        ...size,
        ...dadStyle,
      },
    };


    const playerProps = {
      style: {

      },
      poster: poster,
      src: url,
      onVideoPlay: () => {
        this.setState({isPlaying: true});
      },
      onVideoPause: () => {
        this.setState({isPlaying: false});
      }
    };
    return (
      <View {...wrapperProps}>
        <Player {...playerProps} controls hasFullScreen startBtn/>
        <View style={oneVideoStyles.titleBox}>
          {
            title && !isPlaying && <Text style={oneVideoStyles.title}>{title}</Text>
          }
        </View>
      </View>
    );
  }
}

const singlePostStyles = {
  wrapper: {
    width: 750,
    height: 240,
    paddingTop: 19,
    paddingBottom: 19,
    borderBottomWidth: 1,
    borderBottomColor: '#e2e2e2',
    display: 'flex',
    flexDirection: 'row',
    // justifyContent: 'space-between',
  },
  picture: {
    width: 348,
    height: 202,
    marginRight: 23,
  },
  right: {
    width: 360,
    height: 202,
  },
  contentBox: {
    width: 360
  },
  title: {
    fontSize: 28,
    lineHeight: 28,
    width: 350,
    marginBottom: 13,
  },
  content: {
    fontSize: 24,
    lineHeight: 25,
    width: 350,
    color: '#8d8787',
  },
  keyArray: {
    position: 'absolute',
    right: 40,
    bottom: 0,
    flexDirection: 'row',
  },
  keyWord: {
    marginLeft: 10,
    height: 46,
    flexDirection: 'row',
    backgroundColor: '#ccc'
  },
  keyText: {
    textAlign: 'center',
    height: 46,
    borderRadius: 20,
    paddingLeft: 19,
    paddingRight: 19,
    marginLeft: 6,
    lineHeight: 46,
    fontSize: 24,
    // backgroundColor: '#ff746d',
    backgroundColor: 'rgba(254,213,211,0.5)',
    color: '#f20900',
    // color: '#ffffff',
  },

};
class SinglePost extends Component {
  constructor(props) {
    super(props);

  }

  renderItems(item, index) {
    const { tab, clickHot = () => {}, mds } = this.props;
    const { pic, title, content, keyWords, hotUrl } = item;
    const keyArray = keyWords.split(',');

    const spmdId = `${tab}_${index + 1}_post`;
    const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
    const touchProps = {
      'data-spmd': spmd,
      style: singlePostStyles.wrapper,
      onPress: () => {
        clickHot(hotUrl, spmdId);
      },
    };
    const picProps = {
      source: {
        uri: pic,
      },
      style: singlePostStyles.picture,
      lazyload: true,
      resizeMode: 'cover',
    };
    return (
      <Touchable {...touchProps}>
        <Picture {...picProps}/>
        <View style={singlePostStyles.right}>
          <View style={singlePostStyles.contentBox}>
            <Text style={singlePostStyles.title}>{title}</Text>
            <Text style={singlePostStyles.content}>{content}</Text>
          </View>
          <View style={singlePostStyles.keyArray}>
            {
              keyArray.map(word => {
                return (
                  <Text style={singlePostStyles.keyText}>#{word}</Text>
                );
              })
            }
          </View>
        </View>
      </Touchable>
    );
  };

  render() {
    const { data, dadStyle = {} } = this.props;

    return (
      <View style={{width: 750, height: 240 * data.length, ...dadStyle}}>
        {
          data.map((item, index) => this.renderItems(item, index))
        }
      </View>

    );
  }

}

const toHomeStyle = {
  wrapper: {
    marginTop: 50,
    width: 750,
    // height: 240,
    // backgroundColor: '#123456',
    // position: 'relative',
    display: 'flex',
    alignContent: 'space-between',
  },
  logoWrapper: {
    width: 750,
    height: 184,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  logo: {
    width: 164,
    height: 164,
  },
  touch: {
    // width: 750,
    // height: 56,
    // position: 'absolute',
  },
  bottom: {
    // width: 750,
    // height: 56,
  },

};
class ToHome extends Component {
  render() {
    const {logo, bottomPic, goToHome, toTopPic = '', bottomPicHeight, dadStyle = {}} = this.props;
    const logoProps = {
      source: {
        uri: logo,
      },
      style: {
        ...toHomeStyle.logo,

      },
      lazyload: true,
    };
    const touchProps = {
      onPress: () => {
        goToHome();
      },
      style: {
        width: 750,
        height: bottomPicHeight,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
      },
    };
    const bottomPicProps = {
      source: {
        uri: toTopPic === '' ? bottomPic : toTopPic,
      },
      style: {
        // ...toHomeStyle.bottom,
        height: bottomPicHeight,
        width: 750,
        // top: 240 - 56,


      },
      lazyload: true,
    };

    return (
      <View style={{
        ...toHomeStyle.wrapper,
        ...dadStyle,
      }}>
        <View style={toHomeStyle.logoWrapper}>
          <Picture {...logoProps}/>
        </View>
        <Touchable {...touchProps}>
          <Picture {...bottomPicProps}/>
        </Touchable>
      </View>
    );
  }
}

const videoListStyle = {
  box: {
    width: 750,
  },
  title: {
    height: 76,
  },
  text1: {
    height: 76,
    lineHeight: 76,
    textAlign: 'center',
    color: 'white',
    fontSize: 28,
  },
  text2: {
    height: 76,
    lineHeight: 76,
    paddingLeft: 17,
    fontSize: 24,
  },
  btn: {
    position: 'absolute',
    bottom: 17,
    right: 40,
    height: 42,
    width: 112,
    backgroundColor: '#ff6409',
    borderRadius: 21,
  },
  btnText: {
    height: 42,
    lineHeight: 42,
    width: 112,
    fontSize: 20,
    textAlign: 'center',
    color: 'white',
  }
};
class VideoList1 extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isPlaying: false,
      num: -1,
    };
  }


  renderItem(video, index) {
    const {
      mds,
      tab,
      videoHeight,
      videoWidth,
      clickHot = () => {},
    } = this.props;
    const videoSize = {
      width: videoWidth,
      height: videoHeight,
    };

    const spmdId = `${tab}_showMore`;
    const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
    let textProps = {
      style: {
        ...videoListStyle.title,
        // position: 'absolute',
        // bottom: 0,
        // left: 0,
        backgroundColor: 'rgba(138, 138, 138, 0.6)',
        width: videoWidth,
      },
    };
    let viewStyle = {
      width: videoWidth,
      marginLeft: (750 - videoWidth) / 2,
      marginTop: 15,
      borderRadius: 20,
      overflow: 'hidden',
      // backgroundColor: '#cccccc'
    };

    const playerProps = {
      style: {
        width: videoWidth,
        height: videoHeight,
      },
      url: video.video,
      poster: video.videoPoster,
      index: index,
    };

    // console.log('videoSize.videoWidth===', videoWidth);

    return (
      <View style={viewStyle} key={index}>
        {/* <OneVideo {...oneVideoprops}/> */}
        <SinglePlayer {...playerProps}/>
        <View {...textProps}>
          <Text style={videoListStyle.text1}>
            {video.title}
          </Text>
        </View>
      </View>
    );
  }

  render() {
    const {
      videoList,
      dadStyle = {},
    } = this.props;

    return (
      <View style={{
        ...videoListStyle.box,
        ...dadStyle,
      }}>
        {
          videoList.map((video, index) => this.renderItem(video, index))
        }
      </View>
    );
  }
}

class VideoList2 extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isPlaying: false,
      num: -1,
    };
  }


  renderItem(video, index) {
    const {
      mds,
      tab,
      videoHeight,
      videoWidth,
      clickHot = () => {},
    } = this.props;
    const videoSize = {
      width: videoWidth,
      height: videoHeight,
    };

    const spmdId = `${tab}_showMore`;
    const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
    let viewStyle = {
      width: videoWidth,
      height: videoHeight + 80,
      marginLeft: (750 - videoWidth) / 2,
      marginTop: 15,
      borderRadius: 20,
      overflow: 'hidden',
    };

    const textProps = {
      style: {
        width: videoWidth,
        ...videoListStyle.title,
        backgroundColor: 'rgba(138, 138, 138, 0.2)',
      },
    };
    const btnProps = {
      style: videoListStyle.btn,
      'data-spmd': spmd,
      onPress: () => {
        clickHot(video.showAll, spmd);
      }
    };

    const playerProps = {
      style: {
        width: videoWidth,
        height: videoHeight,
      },
      url: video.video,
      poster: video.videoPoster,
      index: index,
    };

    // console.log('videoSize.videoWidth===', videoWidth);
    // console.log('videoSize.videoHeight===', videoHeight);

    return (
      <Touchable style={viewStyle} key={index}>
        <SinglePlayer {...playerProps}/>
        {/*<Player {...playerProps} controls hasFullScreen startBtn muted/>*/}
        <View {...textProps}>
          <Text style={videoListStyle.text2}>
            {video.title}
          </Text>
          <Touchable {...btnProps}>
            <Text style={videoListStyle.btnText}>
              查看全部
            </Text>
          </Touchable>
        </View>
      </Touchable>
    );
  }


  render() {
    const {
      videoList,
      dadStyle = {},
    } = this.props;

    return (
      <View style={{
        ...videoListStyle.box,
        ...dadStyle,
      }}>
        {
          videoList.map((video, index) => this.renderItem(video, index))
        }
      </View>
    );
  }
}

// 单个视频
const singleVideoStyle = {
  box: {
    position: 'absolute',
    top: 0,
    left: 0,
  },
};
class SinglePlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isPlaying: false,
    };
  }


  render() {
    let { url, poster, index, style, } = this.props;
    const { isPlaying } = this.state;

    const videoProps = {
      style,
      // muted: false,
      src: url,
      controls: true,
      ref: 'video',
      autoPlay: true,
      autoplay: true,

      // onVideoPlay: () => {
      //   // this.setState({isPlaying: true});
      //   this.isPlay(true, index);
      // },
      // onVideoPause: () => {
      //   // this.setState({isPlaying: false});
      //   this.isPlay(false, index);
      // },

      // onAppear: () => {
      //   this.refs.video.refs.video.play();
      // },
      // onDisappear: () => {
      //   this.refs.video.refs.video.pause();
      // },
    };

    const touchProps = {
      style: {
        ...style,
        ...singleVideoStyle.box,
      },
      onPress: () => {
        // this.refs.video.load();
        // this.refs.video.play();
        this.setState({
          isPlaying: true,
        });
      }
    };
    const posterProps = {
      style: {
        ...style,
        ...singleVideoStyle.box,
      },
      source: {
        uri: poster,
      },
      lazyload: true,
    };
    return (
      <View style={{...style}}>
        {
          isPlaying ? <video {...videoProps}/> :
            <Touchable {...touchProps}>
              <Picture {...posterProps}/>
            </Touchable>
        }
      </View>
    );
  }
}

class SingleVideo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isPlaying: false,
      num: -1,
    };
  }

  render() {
    const {
      mds, tab,
      height, width,
      poster, url, title, hot,

      clickHot = () => {},
    } = this.props;


    const spmdId = `${tab}_showMore`;
    const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
    let viewStyle = {
      width: width,
      height: height + 80,
      marginLeft: (750 - width) / 2,
      marginTop: 15,
      borderRadius: 20,
      overflow: 'hidden',
    };

    const textProps = {
      style: {
        width: width,
        ...videoListStyle.title,
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
      },
    };
    const btnProps = {
      style: videoListStyle.btn,
      'data-spmd': spmd,
      onPress: () => {
        clickHot(hot, spmd);
      }
    };

    const playerProps = {
      style: {
        width: width,
        height: height,
      },
      url: url,
      poster: poster,
    };


    return (
      <Touchable style={viewStyle}>
        <SinglePlayer {...playerProps}/>
        {
          hot ? <View {...textProps}>
            <Text style={videoListStyle.text2}>
              {title}
            </Text>
            <Touchable {...btnProps}>
              <Text style={videoListStyle.btnText}>
                查看全部
              </Text>
            </Touchable>
          </View> :
          <View {...textProps}>
            <Text style={videoListStyle.text1}>
              {title}
            </Text>
          </View>
        }

      </Touchable>
    );
  }
}
